<template>
	<view class="page">

		<view class="top-backgroup">
			<!-- <image src='../../static/img/77221716882753_.pic.jpg' class='backgroud-image'> -->
			<!-- </image> -->
		</view>
		<view class="body">
			<view class="body-1 tn-flex-column">
				<!-- <view class="search-nav">
					<view class="search-nav-item">
						<tn-search-box border-color="tn-gray-light" placeholder-icon="text-hot" />
					</view>
				</view> -->
				<view class="merchant—info tn-flex tn-flex-center-between tn-gradient-bg__cool-6 tn-shadow-lg">
					<view class="merchant—info-bg—img">
						<!-- <image src="../../static/img/77181716882625_.pic.jpg"></image> -->
					</view>
					<view class="tn-margin-sm tn-p-sm">
						<tn-avatar badge="保障" :url="avatarLogSrc" shape="circle" size="220rpx"></tn-avatar>
					</view>

					<view class="tn-flex tn-flex-column tn-flex-justify-between">
						<view class="tn-mt-xs">
							<tn-title size="xl">橙艺国际艺术培训</tn-title>
						</view>
						<view class="tn-mt-xs">
							<tn-title>营业:09:00-21:30</tn-title>
						</view>

						<view class="tn-flex tn-mt-xs">
							<tn-rate v-model="rateValue" size="30rpx" active-color="tn-red"></tn-rate>
							<tn-title color="tn-red">5分</tn-title>
						</view>
						<view class="tn-flex tn-flex-row tn-mb-xs">
							<tn-tag font-size="20rpx" border="true" border-color="white">品牌店铺</tn-tag>
						</view>
					</view>
					<view class="tn-flex tn-flex-column  tn-ml-sm tn-mr-sm">
						<view class="tn-mb-xl">
							<tn-avatar size="sm"></tn-avatar>
							<tn-title size="sm">电话</tn-title>
						</view>
						<view>
							<tn-avatar size="sm"></tn-avatar>
							<tn-title size="sm">导航</tn-title>
						</view>
					</view>

				</view>
				<view class="function-info tn-flex tn-flex-row tn-flex-center-between tn-mt-xl">

					<view class="function-item-1  tn-gradient-bg__cool-5 tn-shadow-lg ">
						<view class="function-item-1-conten">
							<text class="tn-text-sm tn-gray-light_text tn-ml-sm tn-mt-sm tn-text-xl">团购中心</text>
							<text class="tn-text-xs tn-gray-light_text tn-m-xs">优惠低至1折</text>
						</view>
<!-- 						<view class="function-icon tn-m-sm">
							<tn-icon name="vip" size="60rpx" color="tn-gray=light"></tn-icon>
						</view> -->
					</view>

					<view class="function-item-1 tn-gradient-bg__cool-6 tn-shadow-lg tn-ml-sm">
						<view class="function-item-1-conten">
							<text class="tn-text-sm tn-gray-light_text tn-ml-sm tn-mt-sm tn-text-xl">我要预约</text>
							<text class="tn-text-xs tn-gray-light_text tn-m-xs">会员预约服务</text>
						</view>
<!-- 						<view class="function-icon tn-m-sm">
							<tn-icon name="location" size="60rpx" color="tn-gray=light"></tn-icon>
						</view> -->
					</view>

					<view class="function-item-1 tn-gradient-bg__cool-7 tn-shadow-lg tn-ml-sm">
						<view class="function-item-1-conten">
							<text class="tn-text-sm tn-gray-light_text tn-ml-sm tn-mt-sm tn-text-xl">会员中心</text>
							<text class="tn-text-xs tn-gray-light_text tn-m-xs">获取会员折扣</text>
						</view>
<!-- 						<view class="function-icon tn-m-sm">
							<tn-icon name="sport-run" size="60rpx" color="tn-gray=light"></tn-icon>
						</view> -->
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="stack-swiper-container">
					<view class="uni-margin-wrap">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration">
							<swiper-item v-for="(item,index) in swiperData">
									<image :src="item"/>
								</swiper-item>
							<!-- <swiper-item>
								<image src="../../static/tabBarImages/bannar/lunbo-banner.png" />
							</swiper-item> -->
						</swiper>
					</view>
				</view>


				<view class="list-nav">
					<!-- 分类tabs选项 -->
					<view>
						<TnTabs v-model="currentTabIndex" :before-switch="beforeSwitch">
							<TnTabsItem v-for="(item, index) in tabsData" :key="index" :title="item.text"
								:scroll="false" />
						</TnTabs>
					</view>
					<!-- 列表 -->
					<view>
						<view class="tn-mt-sm">

							<tn-list-item bottom-border bottom-border-indent @click="toDetail('pd19999999')">
								<view class="tn-flex tn-flex">
									<view class="pd-avatar tn-mr-sm">
										<image src="../../static/img/product1.png"></image>
									</view>
									<view class="pd-info tn-flex-column tn-flex-start-start">
										<view class="tn-mb-xs">
											<tn-title> 商品·街舞速成班</tn-title>
										</view>
										<view class="tn-mb-xs">
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">12月</tn-tag>
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">按月扣款</tn-tag>
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">热门推介</tn-tag>
										</view>
										<view class="tn-flex tn-flex-row tn-flex-end-center tn-mb-xs">
											<view class="tn-mr-xl">
												<tn-title size="sm" color="tn-gray">库存：998</tn-title>
											</view>

											<image src="../../static/ali/xxhf-t-b.png" class="xxhx-icon"></image>
										</view>
										<view class="tn-mb-xs">
											<view class="tn-flex-row tn-flex-end-center">
												<view class="tn-mr-xl"> <tn-title color="tn-gray">￥1998</tn-title>
												</view>
												<view class="tn-mr-xl tn-text-bold"><tn-title
														color="tn-red">￥998</tn-title></view>
												<view class="tn-mr-xl"><tn-button type="primary" shape="round" shadow
														bg-color="tn-gradient-bg__cool-7">0元下单</tn-button></view>
											</view>
										</view>
									</view>
								</view>
							</tn-list-item>
							
							<tn-list-item bottom-border bottom-border-indent @click="toDetail('pd19999999')">
								<view class="tn-flex tn-flex">
									<view class="pd-avatar tn-mr-sm">
										<image src="../../static/img/product2.jpeg"></image>
									</view>
									<view class="pd-info tn-flex-column tn-flex-start-start">
										<view class="tn-mb-xs">
											<tn-title> 商品·名族舞蹈</tn-title>
										</view>
										<view class="tn-mb-xs">
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">12月</tn-tag>
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">按月扣款</tn-tag>
											<tn-tag size="sm" font-size="20rpx" :custom-style="myTagStyle"
												bg-color="gradient-bg__cool-7">热门推介</tn-tag>
										</view>
										<view class="tn-flex tn-flex-row tn-flex-end-center tn-mb-xs">
											<view class="tn-mr-xl">
												<tn-title size="sm" color="tn-gray">库存：198</tn-title>
											</view>
							
											<image src="../../static/ali/xxhf-t-b.png" class="xxhx-icon"></image>
										</view>
										<view class="tn-mb-xs">
											<view class="tn-flex-row tn-flex-end-center">
												<view class="tn-mr-xl"> <tn-title color="tn-gray">￥1998</tn-title>
												</view>
												<view class="tn-mr-xl tn-text-bold"><tn-title
														color="tn-red">￥998</tn-title></view>
												<view class="tn-mr-xl"><tn-button type="primary" shape="round" shadow
														bg-color="tn-gradient-bg__cool-7">0元下单</tn-button></view>
											</view>
										</view>
									</view>
								</view>
							</tn-list-item>
						</view>
					</view>

				</view>
			</view>
		</view>


	</view>
</template>

<script lang="ts" setup>
	import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
	import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
	import TnListItem from '@/uni_modules/tuniaoui-vue3/components/list/src/list-item.vue'


	import { CSSProperties, ref } from 'vue'
	const rateValue = ref(5)
	const avatarLogSrc = ref('https://winwin-public.oss-cn-hangzhou.aliyuncs.com/WechatIMG7098.jpg')
	const currentSwiperIndex = ref(0)
	const swiperData = [
		"../../static/tabBarImages/bannar/lunbo-banner.png",
		"../../static/tabBarImages/bannar/lunbo.png",
		"../../static/tabBarImages/bannar/lunbo-banner.png"
	];
	const currentTabIndex = ref(0)
	const tabsData = [
		{
			text: '全部',
		},
		{
			text: '美术',
		},
		{
			text: '乐器',
		},
		{
			text: '舞蹈',
		}
	]

	let indicatorDots = true
	let autoplay = true
	let interval = 3000
	let duration = 1500
	let about = "关于我们的爱"

	let info = [{
		content: '内容 A'
	}, {
		content: '内容 B'
	}, {
		content: '内容 C'
	}]
	let current = 0
	let mode = 'round'

	const beforeSwitch = (index : number) => {
		if (index === 1) {
			// uni.showToast({
			//   icon: 'none',
			//   title: '被拦截了',
			// })
			about = "关于我们的不爱"
			console.log(about)
			return true
		}
		return true
	}
	const myTagStyle : CSSProperties = {
		marginRight: '10px'
	}

	function toDetail(pdId) {
		console.log("进来了");
		uni.navigateTo({
			// url: `/pages/index/pdDetail/pdDetail?pdId=${pdId}`
			url: "/pages/detail-page/product-detail/product-detail"
		});
	};
</script>

<style lang="scss" scoped>
	.page {
		background-image: linear-gradient(rgba(113, 203, 231), rgba(246, 246, 246));
		height: 50vh;
	}

	.body {
		margin: 90rpx 24rpx 34rpx 24rpx;
		// background-color: rgba(246, 246, 246);
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 80rpx;
		z-index: -1;

		.backgroud-image {
			padding-top: 100rpx;
			width: 100%;
			height: 350rpx;
			// width: 100%;
			// height: 650rpx;
			opacity: 0.5;
			;
		}
	}

	// 搜索框
	.search-nav {
		// border: 1px solid #000;
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		margin: 0 18rpx 40rpx;
		display: flex;
		justify-content: right;

		.search-nav-item {
			background-color: var(--tn-color-gray-light);
			border-radius: 12rpx;
			width: 65%;
			height: auto;
		}
	}

	.merchant—info {
		margin-top: 80rpx;
		border-radius: 10rpx;
		position: relative;

		.merchant—info-bg—img {
			position: absolute;
			opacity: 0.3;
			width: 100%;
			height: 100%;
		}
	}

	//功能选项
	.function-item-1 {
		width: 300rpx;
		height: 150rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

		&::after {
			content: " ";
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: inherit;
			left: 0;
			bottom: 0;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: inherit
		}

		.function-item-1-conten {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		.function-icon {
			opacity: 0.3;
		}

	}

	.function-item-1:nth-of-type(1n)::after {
		background-image: url("../../static/wave/1.png")
	}

	.function-item-1:nth-of-type(2n)::after {
		background-image: url("../../static/wave/2.png")
	}

	.function-item-1:nth-of-type(3n)::after {
		background-image: url("../../static/wave/3.png")
	}

	.function-item-1:nth-of-type(4n)::after {
		background-image: url("../../static/wave/4.png")
	}

	.function-item-1:nth-of-type(5n)::after {
		background-image: url("../../static/wave/5.png")
	}

	.function-item-1:nth-of-type(6n)::after {
		background-image: url("../../static/wave/6.png")
	}

	//轮播图
	.uni-margin-wrap {
		width: 100%;

		.swiper {
			height: 180rpx;
		}
	}

	//Tab标签页

	//商品列表
	.pd-avatar {
		height: 200rpx;
		width: 150rpx;
	}

	//先学后享图标
	.xxhx-icon {
		width: 120px;
		height: 16px;
		margin-right: 10px;
	}
</style>